﻿<head>
    <script src="~/lib/vue/dist/vue.global.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link href="~/css/table.css" rel="stylesheet" />
</head>
<div id="app">
    <table width="100%">
        <tr>
            <td>
                <p color="black">您正在做的业务是：人力资源--薪酬标准管理--薪酬发放登记(负责人控制)</p>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                薪酬总数:{{totalRecords}}，
                总人数:{{headcount}}，基本薪酬总数:{{formattedTotalSalarySum(totalCost)}}，实发总额:{{formattedTotalSalarySum(totalCostS)}}
            </td>
        </tr>
    </table>

    <el-table :data="tableData" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
        <el-table-column prop="xuHao" label="序号"></el-table-column>
        <el-table-column prop="nme" label="I级机构名称" v-if="zhi==1"></el-table-column>
        <el-table-column prop="nme" label="II级机构名称" v-if="zhi==2"></el-table-column>
        <el-table-column prop="nme" label="III级机构名称" v-if="zhi==3"></el-table-column>
        <el-table-column prop="recordCount" label="人数"></el-table-column>
        <el-table-column prop="totalSalarySum" label="基本薪酬总额(元)">
            <template #default="scope">
                {{ formattedTotalSalarySum(scope.row.totalSalarySum) }}
            </template>
        </el-table-column>
        <el-table-column label="登记">
            <template #default="scope">
                <el-button size="" v-on:click="handleEdit(scope.row)">登记</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

<script>
    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            const urlParams = new URLSearchParams(window.location.search);
            const zhi = JSON.parse(urlParams.get('zhi'));
            let tableData = ref([])
            let totalRecords = ref(0)
            let headcount = ref(0)
            let totalCost = ref(0)
            let totalCostS = ref(0)

            const fetchData = () => {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/SelectHFQ', {
                    zhi: zhi
                })
                    .then(res => {
                        tableData.value = res.data.hf;
                        totalRecords.value = res.data.totalRecords
                        headcount.value = res.data.headcount
                        totalCost.value = res.data.totalCost
                        totalCostS.value = res.data.totalCost
                    })
            };
            function formattedTotalSalarySum(num) {
                return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num);
            }
            function handleEdit(row) {
                const queryParams = new URLSearchParams();
                queryParams.set('rowData', JSON.stringify(row.hF));
                window.location.href = `/PayrollRegistration/Index2?${queryParams.toString()}`;
            }
            fetchData();
            return {
                urlParams,
                zhi,
                tableData,
                totalRecords,
                totalCostS,
                totalCost,
                headcount,
                handleEdit,
                formattedTotalSalarySum
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");

</script>
<style type="text/css">
    body {
        background-color: #FFFFBB;
        border: 1px solid #FFDB6F;
        display: block;
        margin: 8px;
    }

</style>


